<template>
    <div ref="drop" :style="{width: width,top:offset}" v-show="showPopper" class="drop-down-menus" :class="[location,{'arrow':arrow}]">
        <slot/>
    </div>
</template>

<script>
    export default {
        name: "ep-drop-down-menu",
        props: {
            location: {
                type: String,
                default: 'center',
            },
            width:{
                type:String,
                default:"100%"
            },
            arrow: {
                type: Boolean,
                default: true
            },
            offset:{
                type:Number,
                default:47
            }
        },
        data() {
            return {
                showPopper: false
            }
        },
        created() {
            this.$on('visible', val => {

                this.showPopper = val;
            });
        },
        methods: {}
    }
</script>

<style lang="scss">
    .drop-down-menus {
        background: #ffffff;
        box-shadow: 0px 2px 6px 0 rgba(0, 0, 0, 0.5);
        border: none;
        border-radius: 0;
        display: block;
        position: absolute;
        min-width: 80px;
        z-index: 1000;
        min-height: 40px;
        box-sizing: border-box;

        &.arrow {
            &:after {
                content: "";
                position: absolute;
                border-width: 6px;
                border-style: solid;
                border-color: transparent transparent #fff;
                left: 50%;
                top: -12px;
                margin-left: -3px;
            }
        }
        &.center {
            left: 0 !important;
            right: auto;

            &:after {
                left: 50%;
            }

        }
        &.right {
            left: auto;
            right: 0 !important;
            &:after {
                right: 20%;
                left: auto;
            }
        }
        &.left {
            left: 0 !important;
            right: auto;
            &:after {
                left: 20%;
            }

        }
    }
</style>
